<script lang="ts" setup>
</script>

<template>
  <view class="flex-row page">
    <image class="shrink-0 self-start image" src="https://i.postimg.cc/RZ88dxp7/image-png-1.png" />
    <image class="shrink-0 image_2" :src="video" />
    <view class="flex-row shrink-0 group">
      <view class="flex-col justify-start shrink-0 relative group_2">
        <view class="section"></view>
        <text class="text_4 pos_2">差距</text>
        <image class="image_3 pos"
          src="https://ide.code.fun/api/image?token=65faf3ee731c750011010e42&name=4d174cdd625a543456d16d08f5e88ffb.png" />
        <view class="flex-row items-center section_2 pos_3">
          <text class="font_2 text_5">项目</text>
          <text class="font_2 text_6">标准</text>
          <text class="font_2 text_7">我的</text>
          <text class="font_2 text_8">差距</text>
        </view>
        <view class="flex-col justify-start items-start text-wrapper pos_4">
          <text class="font_2 text_11">前倾</text>
        </view>
        <view class="flex-row items-center section_3 pos_7">
          <text class="font_2 text_12">步频</text>
          <view class="flex-row items-center shrink-0 ml-144">
            <text class="font_4 text_13">186</text>
            <text class="ml-54 font_4">6</text>
          </view>
        </view>
        <view class="flex-col justify-start items-start text-wrapper_1 pos_8">
          <text class="font_2 text_16">摆臂</text>
        </view>
        <view class="flex-col justify-start items-start text-wrapper_2 pos_11">
          <text class="font_2 text_18">脚踝</text>
        </view>
        <view class="flex-col justify-start items-start text-wrapper_4 pos_14">
          <text class="font_2 text_19">屈膝</text>
        </view>
        <text class="font_3 text_9 pos_5">13°</text>
        <text class="font_3 text_14 pos_9">92°</text>
        <text class="font_3 text_17 pos_12">75°</text>
        <text class="font_5 text_17 pos_15">75°</text>
        <text class="font_3 text_10 pos_6">0°</text>
        <text class="font_3 text_10 pos_10">0°</text>
        <text class="font_3 text_10 pos_13">0°</text>
        <text class="font_5 text_9 pos_16">15°</text>
      </view>
      <text class="shrink-0 self-start font text">10</text>
      <text class="shrink-0 self-start font text_2">20</text>
      <text class="shrink-0 self-start font text_2">30</text>
      <text class="shrink-0 self-start font text_2">40</text>
      <text class="shrink-0 self-start font text_2 text_3">50</text>
    </view>
  </view>
</template>

<style lang="scss">
html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.ml-2 {
  margin-left: 1.62rpx;
}

.mt-2 {
  margin-top: 1.62rpx;
}

.ml-4 {
  margin-left: 3.25rpx;
}

.mt-4 {
  margin-top: 3.25rpx;
}

.ml-6 {
  margin-left: 4.87rpx;
}

.mt-6 {
  margin-top: 4.87rpx;
}

.ml-8 {
  margin-left: 6.49rpx;
}

.mt-8 {
  margin-top: 6.49rpx;
}

.ml-10 {
  margin-left: 8.12rpx;
}

.mt-10 {
  margin-top: 8.12rpx;
}

.ml-12 {
  margin-left: 9.74rpx;
}

.mt-12 {
  margin-top: 9.74rpx;
}

.ml-14 {
  margin-left: 11.36rpx;
}

.mt-14 {
  margin-top: 11.36rpx;
}

.ml-16 {
  margin-left: 12.99rpx;
}

.mt-16 {
  margin-top: 12.99rpx;
}

.ml-18 {
  margin-left: 14.61rpx;
}

.mt-18 {
  margin-top: 14.61rpx;
}

.ml-20 {
  margin-left: 16.23rpx;
}

.mt-20 {
  margin-top: 16.23rpx;
}

.ml-22 {
  margin-left: 17.86rpx;
}

.mt-22 {
  margin-top: 17.86rpx;
}

.ml-24 {
  margin-left: 19.48rpx;
}

.mt-24 {
  margin-top: 19.48rpx;
}

.ml-26 {
  margin-left: 21.1rpx;
}

.mt-26 {
  margin-top: 21.1rpx;
}

.ml-28 {
  margin-left: 22.73rpx;
}

.mt-28 {
  margin-top: 22.73rpx;
}

.ml-30 {
  margin-left: 24.35rpx;
}

.mt-30 {
  margin-top: 24.35rpx;
}

.ml-32 {
  margin-left: 25.97rpx;
}

.mt-32 {
  margin-top: 25.97rpx;
}

.ml-34 {
  margin-left: 27.6rpx;
}

.mt-34 {
  margin-top: 27.6rpx;
}

.ml-36 {
  margin-left: 29.22rpx;
}

.mt-36 {
  margin-top: 29.22rpx;
}

.ml-38 {
  margin-left: 30.84rpx;
}

.mt-38 {
  margin-top: 30.84rpx;
}

.ml-40 {
  margin-left: 32.47rpx;
}

.mt-40 {
  margin-top: 32.47rpx;
}

.ml-42 {
  margin-left: 34.09rpx;
}

.mt-42 {
  margin-top: 34.09rpx;
}

.ml-44 {
  margin-left: 35.71rpx;
}

.mt-44 {
  margin-top: 35.71rpx;
}

.ml-46 {
  margin-left: 37.34rpx;
}

.mt-46 {
  margin-top: 37.34rpx;
}

.ml-48 {
  margin-left: 38.96rpx;
}

.mt-48 {
  margin-top: 38.96rpx;
}

.ml-50 {
  margin-left: 40.58rpx;
}

.mt-50 {
  margin-top: 40.58rpx;
}

.ml-52 {
  margin-left: 42.21rpx;
}

.mt-52 {
  margin-top: 42.21rpx;
}

.ml-54 {
  margin-left: 43.83rpx;
}

.mt-54 {
  margin-top: 43.83rpx;
}

.ml-56 {
  margin-left: 45.45rpx;
}

.mt-56 {
  margin-top: 45.45rpx;
}

.ml-58 {
  margin-left: 47.08rpx;
}

.mt-58 {
  margin-top: 47.08rpx;
}

.ml-60 {
  margin-left: 48.7rpx;
}

.mt-60 {
  margin-top: 48.7rpx;
}

.ml-62 {
  margin-left: 50.32rpx;
}

.mt-62 {
  margin-top: 50.32rpx;
}

.ml-64 {
  margin-left: 51.95rpx;
}

.mt-64 {
  margin-top: 51.95rpx;
}

.ml-66 {
  margin-left: 53.57rpx;
}

.mt-66 {
  margin-top: 53.57rpx;
}

.ml-68 {
  margin-left: 55.19rpx;
}

.mt-68 {
  margin-top: 55.19rpx;
}

.ml-70 {
  margin-left: 56.82rpx;
}

.mt-70 {
  margin-top: 56.82rpx;
}

.ml-72 {
  margin-left: 58.44rpx;
}

.mt-72 {
  margin-top: 58.44rpx;
}

.ml-74 {
  margin-left: 60.06rpx;
}

.mt-74 {
  margin-top: 60.06rpx;
}

.ml-76 {
  margin-left: 61.69rpx;
}

.mt-76 {
  margin-top: 61.69rpx;
}

.ml-78 {
  margin-left: 63.31rpx;
}

.mt-78 {
  margin-top: 63.31rpx;
}

.ml-80 {
  margin-left: 64.94rpx;
}

.mt-80 {
  margin-top: 64.94rpx;
}

.ml-82 {
  margin-left: 66.56rpx;
}

.mt-82 {
  margin-top: 66.56rpx;
}

.ml-84 {
  margin-left: 68.18rpx;
}

.mt-84 {
  margin-top: 68.18rpx;
}

.ml-86 {
  margin-left: 69.81rpx;
}

.mt-86 {
  margin-top: 69.81rpx;
}

.ml-88 {
  margin-left: 71.43rpx;
}

.mt-88 {
  margin-top: 71.43rpx;
}

.ml-90 {
  margin-left: 73.05rpx;
}

.mt-90 {
  margin-top: 73.05rpx;
}

.ml-92 {
  margin-left: 74.68rpx;
}

.mt-92 {
  margin-top: 74.68rpx;
}

.ml-94 {
  margin-left: 76.3rpx;
}

.mt-94 {
  margin-top: 76.3rpx;
}

.ml-96 {
  margin-left: 77.92rpx;
}

.mt-96 {
  margin-top: 77.92rpx;
}

.ml-98 {
  margin-left: 79.55rpx;
}

.mt-98 {
  margin-top: 79.55rpx;
}

.ml-100 {
  margin-left: 81.17rpx;
}

.mt-100 {
  margin-top: 81.17rpx;
}

.ml-144 {
  margin-left: 116.88rpx;
}

.page {
  padding: 22.73rpx 21.92rpx 21.1rpx;
  overflow: hidden;
  border-radius: 34.9rpx;
  background-color: #e9f5ff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .image {
    margin-top: 0.81rpx;
    width: 12.99rpx;
    height: 18.67rpx;
  }

  .image_2 {
    margin-left: 19.48rpx;
    margin-bottom: 2.44rpx;
    border-radius: 4.06rpx;
    width: 240.26rpx;
    height: 301.95rpx;
  }

  .group {
    margin: 2.44rpx 28.41rpx 0 41.4rpx;

    .group_2 {
      width: 363.64rpx;

      .section {
        background-color: #7e818a80;
        filter: blur(2.99rpx);
        height: 301.95rpx;
      }

      .text_4 {
        color: #333131;
        font-size: 20.29rpx;
        font-family: YouSheBiaoTiHei;
        line-height: 14.55rpx;
      }

      .pos_2 {
        position: absolute;
        left: 20.6rpx;
        top: 18.55rpx;
      }

      .image_3 {
        width: 12.99rpx;
        height: 15.42rpx;
      }

      .pos {
        position: absolute;
        left: 62.5rpx;
        top: 16.61rpx;
      }

      .section_2 {
        padding: 5.28rpx 15.54rpx 3.88rpx;
        background-color: #494949;
        border-radius: 8.12rpx;
        width: 305.19rpx;

        .text_5 {
          line-height: 15.63rpx;
        }

        .text_6 {
          margin-left: 41.31rpx;
          line-height: 16.43rpx;
        }

        .text_7 {
          margin-left: 40.07rpx;
        }

        .text_8 {
          margin-left: 34.87rpx;
          margin-right: 15.02rpx;
          line-height: 15.75rpx;
        }
      }

      .pos_3 {
        position: absolute;
        left: 50%;
        top: 48.87rpx;
        transform: translateX(-50%);
      }

      .text-wrapper {
        padding: 6.82rpx 0 3.93rpx;
        background-color: #494949;
        border-radius: 12.18rpx;
        width: 305.19rpx;

        .text_11 {
          margin-left: 18rpx;
        }
      }

      .pos_4 {
        position: absolute;
        left: 50%;
        top: 85.27rpx;
        transform: translateX(-50%);
      }

      .font_2 {
        font-size: 17.86rpx;
        font-family: SourceHanSansCN;
        line-height: 16.55rpx;
        color: #ffffff;
      }

      .section_3 {
        padding: 6.94rpx 17.95rpx 3.86rpx;
        background-color: #494949;
        border-radius: 12.18rpx;
        width: 305.19rpx;

        .text_12 {
          line-height: 16.5rpx;
        }

        .font_4 {
          font-size: 17.86rpx;
          font-family: YouSheBiaoTiHei;
          line-height: 10.16rpx;
          color: #ff0000;
        }

        .text_13 {
          line-height: 10.34rpx;
        }
      }

      .pos_7 {
        position: absolute;
        left: 50%;
        top: 123.32rpx;
        transform: translateX(-50%);
      }

      .text-wrapper_1 {
        padding: 6.08rpx 0 4.76rpx;
        background-color: #494949;
        border-radius: 12.18rpx;
        width: 305.19rpx;

        .text_16 {
          margin-left: 17.58rpx;
          line-height: 16.46rpx;
        }
      }

      .pos_8 {
        position: absolute;
        left: 50%;
        top: 161.38rpx;
        transform: translateX(-50%);
      }

      .text-wrapper_2 {
        padding: 6.27rpx 0 4.69rpx;
        background-color: #494949;
        border-radius: 12.18rpx;
        width: 305.19rpx;

        .text_18 {
          margin-left: 17.56rpx;
          line-height: 16.34rpx;
        }
      }

      .pos_11 {
        position: absolute;
        left: 50%;
        top: 197.78rpx;
        transform: translateX(-50%);
      }

      .text-wrapper_4 {
        padding: 5.32rpx 0 5.58rpx;
        background-color: #494949;
        border-radius: 12.18rpx;
        width: 305.19rpx;

        .text_19 {
          margin-left: 17.69rpx;
          line-height: 16.4rpx;
        }
      }

      .pos_14 {
        position: absolute;
        left: 50%;
        top: 234.17rpx;
        transform: translateX(-50%);
      }

      .font_3 {
        font-size: 17.86rpx;
        font-family: YouSheBiaoTiHei;
        line-height: 25rpx;
        color: #00ff1a;
      }

      .text_9 {
        width: 24.35rpx;
      }

      .pos_5 {
        position: absolute;
        right: 133.85rpx;
        top: 88.8rpx;
      }

      .text_14 {
        width: 30.84rpx;
      }

      .pos_9 {
        position: absolute;
        right: 126.72rpx;
        top: 164.9rpx;
      }

      .text_17 {
        width: 29.22rpx;
      }

      .pos_12 {
        position: absolute;
        right: 129.25rpx;
        top: 201.31rpx;
      }

      .font_5 {
        font-size: 17.86rpx;
        font-family: YouSheBiaoTiHei;
        line-height: 25rpx;
        color: #ff0000;
      }

      .pos_15 {
        position: absolute;
        right: 129.25rpx;
        top: 236.89rpx;
      }

      .text_10 {
        width: 17.86rpx;
      }

      .pos_6 {
        position: absolute;
        right: 67.38rpx;
        top: 88.77rpx;
      }

      .pos_10 {
        position: absolute;
        right: 67.38rpx;
        top: 164.9rpx;
      }

      .pos_13 {
        position: absolute;
        right: 67.38rpx;
        top: 201.31rpx;
      }

      .pos_16 {
        position: absolute;
        right: 62.42rpx;
        top: 236.89rpx;
      }
    }

    .font {
      font-size: 17.86rpx;
      font-family: SourceHanSansCN;
      line-height: 25rpx;
      color: #ffffff;
    }

    .text {
      margin-left: -363.64rpx;
      word-break: break-all;
      opacity: 0.11;
      width: 0.41rpx;
    }

    .text_2 {
      word-break: break-all;
      width: 0.41rpx;
    }

    .text_3 {
      margin-right: 363.23rpx;
    }
  }
}
</style>
